const getVueTemplate = (componenetName) => `
<div class="detail-title-panel"><span class="baseInfo-icon"></span><span>基本信息</span></div>
<div class="btn-panel">
  <el-button type="primary" @click="${componenetName}TableData.push({})" v-if="!isView"
    ><span class="iconfont icon-tianjia"></span>新增</el-button
  >
</div>
<div class="detail-table-panel">
  <el-table border :data="${componenetName}TableData">
    <el-table-column type="index" width="50" label="序号" header-align="center" align="center"></el-table-column>
    <el-table-column
    :prop="item.code"
    v-for="(item, index) in ${componenetName}TableHeaders"
    :min-width="item.width ? item.width : 'auto'"
    :show-overflow-tooltip="true"
    :key="index"
    :label="item.name"
    header-align="center"
    :align="item.align"
  >
    <template slot="header">
      <template v-if="item.required"> <span style="color: red">*</span>{{ item.name }} </template>
    </template>
    <template slot-scope="scope">
      <template v-if="item.type === 'link'">
        <a href="javascript:;" @click="item.clickFn(scope.row)">{{ scope.row[item.code] }}</a>
      </template>
      <el-input v-else-if="item.type === 'dialog'" v-model="scope.row[item.code]" disabled>
        <template slot="append"
          ><i
            v-if="scope.row[item.code] && !isView"
            class="el-icon-circle-close"
            @click="item.clearDialog(scope.row)"
          ></i>
          <el-button
            :disabled="isView"
            slot="append"
            icon="el-icon-search"
            @click="item.openDialog(scope.row)"
          ></el-button>
        </template>
      </el-input>
      <el-input
        :disabled="isView"
        :placeholder="item.placeholder"
        v-else-if="item.type === 'input'"
        v-model="scope.row[item.code]"
        v-restrict="item.restrict || {}"
      ></el-input>
      <el-date-picker
        v-else-if="item.type === 'date'"
        v-model="scope.row[item.code]"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder=""
        :disabled="isView"
      >
      </el-date-picker>
      <el-select
        :disabled="isView"
        v-else-if="item.type === 'select'"
        class="row-select"
        v-model="scope.row[item.code]"
        placeholder=""
        size="mini"
        @change="item.changeFn && item.changeFn(scope.row)"
        ><el-option
          v-for="option in item.optionsFn()"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        ></el-option
      ></el-select>
      <span v-else>{{ scope.row[item.code] }}</span>
    </template>
  </el-table-column>
    <el-table-column label="操作" width="90" header-align="center" align="center" v-if="!isView">
      <template slot-scope="scope">
        <collapseBtnWrapper
          :btnConfig="${componenetName}BtnConfig"
          ref="btnWrapper"
          :disabledItems="isView ? ['delete', 'edit'] : []"
          :owner="scope.row"
        />
      </template>
    </el-table-column>
  </el-table>
</div>`;
const getDataTemplate = (componenetName) => `
${componenetName}TableData: [],
${componenetName}TableHeaders: [
  {
    name: '项目名称',
    code: 'workStepName',
    width: 100,
    type: 'dialog',
    openDialog: row => {
      this.currentRow = row;
      this.dialogShow.workStepDialog = true;
    },
    clearDialog: row => {
      row.workStepId = '';
      row.workStepName = '';
    },
    required: true,
  },
  {
    name: '合格品数量',
    code: 'goodQty',
    width: 100,
    type: 'input',
    restrict: {
      regExp: /^[1-9]\\d{0,8}$/,
    },
    required: true,
  },
  {
    name: '预计完成时间',
    code: 'finishTime',
    width: 100,
    type: 'date',
    required: true,
  },
  {
    name: '工步名称',
    code: 'stepRuleId',
    width: 100,
    type: 'select',
    optionsFn: () => {
      return this.workStepList || [];
    },
    required: true,
  },
],
${componenetName}BtnConfig: [
  {
    label: '删除',
    name: 'delete',
    type: 'danger',
    cb: row => {
      const idx = this.${componenetName}TableData.findIndex(item => item === row);
      if (idx > -1) {
        this.${componenetName}TableData.splice(idx, 1);
      }
    },
    eleType: 'Delete',
  },
],`;
const getModifyTemplate = (componenetName) => [
  //template
  {
    repeatReg: new RegExp(`:data=['"]${componenetName}TableData['"]`),
    targetReg: /(<\/\S*>[\s]*<\/template>[\s]*?<script>)/,
    tagetReplace: `${getVueTemplate(componenetName)}\n$1`,
  },
  // 定义data
  {
    repeatReg: new RegExp(`${componenetName}TableData:\\s*\\[\\]`),
    targetReg: /data\(\)\s*{([\s]*?)return[\s]*{/,
    tagetReplace: `data\(\) {$1return {
     ${getDataTemplate(componenetName)} `,
  },
];
module.exports = {
  getModifyTemplate,
};
